/**
 * Created by xiaomagege on 2019/1/18.
 */
import React from 'react';
import PropTypes from 'prop-types';
import { connect } from 'dva';
import { Table,Pagination ,Input,Button,message,Modal,Radio,Row,Col,Select,Carousel,Tabs,Card} from 'antd';
const TabPane = Tabs.TabPane;
import styles from '../Learningplan/index.less';
const Option = Select.Option;
const RadioGroup = Radio.Group;
export default connect(({ Learnplan, loading }) => ({ Learnplan, loading }))(({Learnplan,Learnplan:{
    gotoListData,
} ,dispatch,loading})=>{
    return (
        <div className={styles.container}>
            <div>
                <div style={{margin:20}}>
                    <h2>应急演练项目:{gotoListData.plan_name}</h2>
                    <Row style={{margin:10}}>
                        {/* <Col span={6}><b>编制:</b></Col> */}
                        {/* <Col span={6}><b>审核:</b></Col> */}
                        {/* <Col span={6}><b>批准:</b></Col> */}
                        <Col span={8}><b>演练时间:</b>{gotoListData.re_time}</Col>
                        <Col span={8}><b>演练地点:</b>{gotoListData.re_location}</Col>
                        <Col span={8}><b>演练类别:</b>{gotoListData.practice_form =='1'?'桌面演练':'功能演练'}</Col>
                    </Row>
                    <Row style={{margin:10}}>
                        <Col span={8}><b>演练组织部门:</b>{gotoListData.plan_depart_Name}</Col>
                        <Col span={8}><b>演练参与部门:</b>{gotoListData.re_depart_name}</Col>
                    </Row>
                    <Row style={{margin:10}}>
                        <Col span={8}><b>总指挥:</b>{gotoListData.chief_name}</Col>
                        <Col span={8}><b>现场总指挥:</b>{gotoListData.scene_chief_name}</Col>
                    </Row>
                </div>
                <div style={{display:'flex'}}>
                    <div style={{width:'50%',textAlign:'center'}}>
                        <h2 style={{border:'4px solid #f0f2f5'}}>签到信息</h2>

                        {
                            (gotoListData.userImageArray && gotoListData.userImageArray.length >1)?
                                <Carousel style={{height:240}} afterChange={()=>{}} vertical autoplay>
                                    {
                                        gotoListData.userImageArray.map(item =>{
                                            return <img key={item} width='300px' height='300px' src={item} alt=""/>;
                                        })
                                    }
                                </Carousel> :
                                <div>
                                    {
                                        gotoListData.userImageArray && gotoListData.userImageArray.map(item =>{
                                            return <img key={item} width='90%' height='300px' src={item} alt=""/>;
                                        })
                                    }
                                </div>
                        }
                    </div>
                    <div style={{width:'50%',textAlign:'center'}}>
                        <h2 style={{border:'4px solid #f0f2f5'}}>现场演练图片</h2>
                        {
                            (gotoListData.sceneUrl && gotoListData.sceneUrl.length >1)?
                                <Carousel style={{height:240}} afterChange={()=>{}} vertical autoplay>
                                    {
                                        gotoListData.sceneUrl.map(item =>{
                                            return <img key={item} width='300px' height='300px' src={item} alt=""/>;
                                        })
                                    }
                                </Carousel> :
                                <div>
                                    {
                                        gotoListData.sceneUrl && gotoListData.sceneUrl.map(item =>{
                                            return <img key={item} width='90%' height='300px' src={item} alt=""/>;
                                        })
                                    }
                                </div>
                        }
                    </div>
                </div>
                <div style={{margin:10}}>
                    <div style={{border:'2px solid #f0f2f5'}}/>
                    <div style={{display:'flex'}}>
                        <h2 style={{padding:10}}>应急预案演练现场记录表</h2>
                        <h2 style={{padding:10,float:"right"}}>答题总分:{gotoListData.mark}</h2>
                    </div>

                    <Tabs onChange={()=>{}} type="card">
                        {
                            gotoListData.answers && gotoListData.answers.map((item,index) =>{
                                return <TabPane tab={item.catalog_name} key={index}>
                                    <div style={{display:'flex',overflow:'auto'}}>
                                        {
                                            item.exampleList.map(i =>{
                                                return(
                                                    <Card key={i.id}
                                                        title={i.example_name}
                                                        extra={<span>{i.example_type == '1'?'(必填)':'(非必填)'}</span>}
                                                        style={{ width: 300,display:'c'}}
                                                    >
                                                        {
                                                            i.details.map(i_1 =>{
                                                                return <RadioGroup key={i_1.id} style={{
                                                                    display:'flex',
                                                                    flexDirection:'column',
                                                                }} value={i.chooseDetailsId}>
                                                                    <Radio value={i_1.id} style={{margin:5}}>
                                                                        {i_1.detail_name}
                                                                        {i_1.detail_num}
                                                                    </Radio>
                                                                </RadioGroup>;
                                                            })
                                                        }
                                                    </Card>
                                                );
                                            })
                                        }
                                    </div>
                                </TabPane>;
                            })
                        }
                    </Tabs>
                </div>

                <div style={{margin:10,padding:10}}>
                    <div style={{border:'2px solid #f0f2f5'}}/>
                    <h2 style={{padding:10}}>应急预案演练总结表</h2>
                    <div>{gotoListData.hadquestion}</div>
                </div>

                <div style={{margin:10}}>
                    <div style={{border:'2px solid #f0f2f5'}}/>
                    <h2 style={{padding:10}}>{gotoListData.plantodo}</h2>
                    {
                        gotoListData.feedback && gotoListData.feedback.map((item,index) =>{
                            return (
                                <div key={index} style={{padding:10}}>
                                    <span style={{fontSize:18}}>{item.title}</span>
                                    <div style={{display:'flex',overflow:'auto'}}>
                                        {
                                            item.imageArray.map(i =>{
                                                return <img key={i} width='300px' style={{margin:5}} height='200px' src={i} alt=""/>;
                                            })
                                        }
                                    </div>
                                </div>
                            );
                        })
                    }

                </div>
            </div>
        </div>
    );
});
